<template>
  <div id="table">
    <div class="container clearflx" style="padding:60px 0 20px;">
      <div class="search" v-if="showType==3">
        <form action method class="search_industry clearflx">
          <input type="submit" value="搜展会" class="search_btn" />
          <input type="text" class="search_text" />
        </form>
      </div>
      <ul class="clearflx">
        <!-- 表格头 -->
        <li class="lists" style="font-weight:700;font-size:17px;">
          <div class="lists_name">
            <span class="lists_name_text">展会名称</span>
          </div>
          <div class="lists_area">
            <span class="lists_area_text">会展场馆</span>
          </div>
          <div class="lists_city">
            <span class="lists_city_text">城市</span>
          </div>
          <div class="lists_startTime">
            <span class="lists_startTime_text">开展时间</span>
          </div>
          <div class="lists_endTime">
            <span class="lists_endTime_text">闭展时间</span>
          </div>
        </li>
        <!-- 表格内容 -->
        <router-link :to="{path:'show_details',query:{title:item.title}}" v-for="(item,index) in data" :key="index">
          <li class="lists fontSize">
            <div class="lists_name">
              <span class="lists_name_type gray">【{{item.type}}】</span>
              <span class="lists_name_title">{{item.title}}</span>
            </div>
            <div class="lists_area">
              <span class="lists_area_text1 gray">{{item.area}}</span>
            </div>
            <div class="lists_city">
              <span class="lists_city_text gray">{{item.city}}</span>
            </div>
            <div class="lists_startTime">
              <span class="lists_startTime_text red">{{item.startTime}}</span>
            </div>
            <div class="lists_endTime">
              <span class="lists_endTime_text red">{{item.endTime}}</span>
            </div>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="container">
      <div class="pageContainer clearflx">
        <!-- 当前页面展示多少条数据 -->
        <div class="pageSizeInner">
          <span class="totalCount">共{{totalCount}}个展会</span>
          <!-- <div class="pageSize">
                <select v-model="perPageCount" @change="changePerPageCount">
                  <option :value="item" v-for="(item, index) in page_size" :key="index">{{item}}</option>9
                </select>
          </div>-->
        </div>
        <!-- 页码部分 -->
        <ul class="pagesInner">
          <!-- 上一页 -->
          <li class="page" :class="{noClick : pageNum == 1}" @click="preOrNext(-1)">
            <span class="page-btn">上一页</span>
          </li>
          <!-- 页码 -->
          <li
            class="page"
            :class="{actived : item === pageNum}"
            v-for="(item, index) in displayPages"
            :key="index"
            @click="select(item)"
          >
            <span>{{item}}</span>
          </li>
          <!-- 下一页 -->
          <li class="page" :class="{noClick : pageNum == totalNum}" @click="preOrNext(1)">
            <span class="page-btn">下一页</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
        showType:String
    },
  data() {
    return {
      data: [
        {
          type: "文化教育",
          title: "2018首届海南国际香业展会",
          area: "海南国际会展中心",
          city: "海南",
          startTime: "2018-07-31",
          endTime: "2018-08-31"
        },
        {
          type: "建材五金",
          title: "2018年上海墙布壁画展第二十六届上海壁纸墙布展",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-10",
          endTime: "2018-08-12"
        },
        {
          type: "食品饮料",
          title: "2018亚洲（北京）国际食品饮料暨进口食品博览会",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-15",
          endTime: "2018-08-17"
        },
        {
          type: "文化教育",
          title: "2018首届海南国际香业展会",
          area: "海南国际会展中心",
          city: "海南",
          startTime: "2018-07-31",
          endTime: "2018-08-31"
        },
        {
          type: "建材五金",
          title: "2018年上海墙布壁画展第二十六届上海壁纸墙布展",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-10",
          endTime: "2018-08-12"
        },
        {
          type: "食品饮料",
          title: "2018亚洲（北京）国际食品饮料暨进口食品博览会",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-15",
          endTime: "2018-08-17"
        },
        {
          type: "文化教育",
          title: "2018首届海南国际香业展会",
          area: "海南国际会展中心",
          city: "海南",
          startTime: "2018-07-31",
          endTime: "2018-08-31"
        },
        {
          type: "建材五金",
          title: "2018年上海墙布壁画展第二十六届上海壁纸墙布展",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-10",
          endTime: "2018-08-12"
        },
        {
          type: "食品饮料",
          title: "2018亚洲（北京）国际食品饮料暨进口食品博览会",
          area: "上海新国际博览中心",
          city: "上海",
          startTime: "2018-08-15",
          endTime: "2018-08-17"
        }
      ],
      currentPage1: 1,
      totalCount: 690, // 总共多少条数据
      //   page_size: ["100条/页", "200条/页", "300条/页", "400条/页"], // 每页展示多少条数据
      pageNum: 1, // 当前页码
      totalNum: 20, // 总页码
      middleSize: 5, // 中间显示几个页码
      //   每页显示多少条数据
      perPageCount: 9
    };
  },
  computed: {
    // 展示页码
    displayPages() {
      // ① 只展示'上一页'、'页码'、'下一页'
      if (this.totalNum <= this.middleSize + 2) {
        let pages = [];
        for (let i = 1; i <= this.totalNum; i++) {
          pages.push(i);
        }
        return pages;
      } else if (this.pageNum <= this.middleSize) {
        // this.pageNum <= this.middleSize+2
        // ② 只展示右侧'...'，只要当前页码小于或者等于要展示的中间页码时就展示
        let pages = [1];
        for (let i = 2; i < this.middleSize + 1; i++) {
          pages.push(i);
        }
        pages.push("...");
        pages.push(this.totalNum);
        return pages;
      } else if (this.pageNum >= this.totalNum - (this.middleSize - 1)) {
        // ③ 只展示左侧'...'，主要当前页码 大于或等于 总页码-(中间要展示页码的个数 - 1)就展示
        let pages = [1, "..."];
        for (
          let i = this.totalNum - this.middleSize + 1;
          i <= this.totalNum;
          i++
        ) {
          pages.push(i);
        }
        return pages;
      } else {
        // ④ 展示左右两侧的'...'
        let pages = [1, "..."];
        // 当左右两侧的...都展示时，中间的页码该如何展示呢？其实就是 当前页码 - (中间要展示页码的个数/2向下取整) 到 当前页码 + (中间要展示页码的个数/2向下取整)即可
        const half = Math.floor(this.middleSize / 2); // 向下取整
        for (let i = this.pageNum - half; i <= this.pageNum + half; i++) {
          pages.push(i);
        }
        pages.push("...");
        pages.push(this.totalNum);
        return pages;
      }
    }
  },
  mounted() {
    // 每页展示多少条数据
    // this.perPageCount = this.page_size[0];
    // 计算总页码是多少
    this.totalNum = Math.ceil(this.totalCount / parseInt(this.perPageCount));
  },
  methods: {
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   // console.log(`当前页: ${val}`);
    // },
    // 点击'上一页'、'下一页'
    preOrNext(n) {
      this.pageNum = this.pageNum + n;
      this.pageNum <= 1
        ? (this.pageNum = 1)
        : this.pageNum > this.totalNum
        ? (this.pageNum = this.totalNum)
        : null;
      // 作为子组件，当前页码发生改变时需要通知父组件
      // this.$emit('pageNumChanged', this.pageNum);
    },
    // 点击'页码'
    select(item) {
      if (typeof item === "string") return;
      if (item == this.pageNum) return;
      this.pageNum = item;
      // 作为子组件，当前页码发生改变时需要通知父组件
      // this.$emit('pageNumChanged', this.pageNum);
    }
    // 选择页面展示条数，重新计算总页码
    // changePerPageCount() {
    //   this.totalNum = Math.ceil(this.totalCount / parseInt(this.perPageCount));
    // }
  }
};
</script>
<style lang="scss" scoped>
.gray {
  color: #848484;
}
.red {
  color: #c81622;
  margin-left: 10px;
}
.fontSize {
  font-size: 15px;
}
.search {
  padding-left: 54px;
  margin-bottom: 20px;
  .search_industry {
    display: block;
    .search_text {
      width: 176px;
      height: 10px;
      line-height: 10px;
      font-size: 12px;
      padding: 10px;
      border: 1px solid #c81622;
      float: left;
      background-image: url(../../assets/info/search_tab.png);
      background-repeat: no-repeat;
      background-size: 16%;
      background-position: right;
    }
    .search_btn {
      float: left;
      width: 60px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      color: #fff;
      background-color: #c81622;
      border: none;
    }
  }
}
.lists {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: left;
  border-bottom: 1px solid #bfbdbf;
  color: #040000;
  .lists_name {
    flex: 5;
    .lists_name_text {
      margin-left: 90px;
    }
    .lists_name_type {
      font-size: 12px;
      margin-left: 32px;
    }
    .lists_name_title {
      color: #040000;
    }
  }
  .lists_area {
    flex: 2;
    .lists_area_text {
      margin-left: 21px;
    }
    .lists_area_text1 {
      margin-left: 8px;
    }
  }
  .lists_city {
    flex: 1.5;
    text-align: center;
  }
  .lists_startTime {
    flex: 1.5;
    .lists_startTime_text {
      margin-left: 21px;
    }
  }
  .lists_endTime {
    flex: 1.5;
    .lists_endTime_text {
      margin-left: 21px;
    }
  }
}
.pageContainer {
  // display: flex;
  // justify-content: space-between;
  padding-bottom: 40px;
  .pageSizeInner {
    // display: inline-block;
    height: 46px;
    line-height: 36px;
    float: left;
    margin-left: 80px;
    .totalCount {
      display: block;
      margin: 5px;
      height: 30px;
      line-height: 33px;
      color: #c1c1c1;
    }
    // .pageSize {
    //   display: inline-block;
    //   > select {
    //     padding: 0 3px;
    //     width: 100px;
    //     height: 30px;
    //     font-size: 12px;
    //     border: 1px solid #eee;
    //     border-radius: 2px;
    //     box-sizing: border-box;
    //     outline: none;
    //   }
    // }
  }
  .pagesInner {
    // display: inline-block;
    text-align: center;
    float: left;
    li {
      display: inline-block;
      margin: 5px;
      list-style: none;
      > span {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 13px;
        border: 1px solid #eee;
        border-radius: 5px;
        cursor: pointer;
      }
      > span.page-btn {
        width: 46px;
        height: 30px;
        line-height: 30px;
        padding: 0 4px;
        color: #c1c1c1;
      }
      &.noClick {
        > span {
          cursor: no-drop;
          // border-color: transparent;
        }
      }
      &.actived {
        > span {
          border-color: #ca1620;
          background-color: #ca1620;
          color: #fff;
        }
      }
    }
  }
}
</style>